<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="connect">连接</button>
    <button id="send" disabled="true">发送数据</button><br>
    从服务器接受的数据: <br>
    <span id="recv"></span>
</body>

</html>
<script>
    console.log(1231);
    var connect = document.querySelector("#connect")
    var send = document.querySelector("#send")
    var recv = document.querySelector("#recv")
    let ws = null
    connect.onclick = () => {
        ws = new WebSocket("ws://localhost:9998")
        ws.onopen = () => {
            console.log("连接服务器成功");
            send.disabled = false
        }
        ws.onclose = () => {
            console.log("连接服务器失败");
            send.disabled = true
        }
        ws.onmessage = (msg) => {
            console.log(msg);
            recv.innerHTML = msg.data
        }
    }
    send.onclick = () => {
        // ws.send("helloSocket from frontend")
        ws.send(JSON.stringify({
            action: "changeTheme",
            socketType: "fullScreen",
            chartName: "trend",
            value: "chalk"
        }))
    }
</script>